<!--https://tailwindcomponents.com/component/login-page-glass-effect-and-background-image-->
<template>
  <div id="canvas" class="css-box">
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import * as THREE from 'three';
import {OBJLoader, OrbitControls} from "three/addons";
import {GUI} from "three/addons/libs/lil-gui.module.min";

function init() {
  let scene = new THREE.Scene();
  const near = 1;
  const far = 200;
  const color = 'lightblue';
  scene.fog = new THREE.Fog(color, near, far);
  scene.background = new THREE.Color(color);
  let camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,200);
  camera.position.set(-93,46,5);
  scene.add(camera);

  const gui = new GUI();
  gui.add(camera.rotation,"x", -360, 360);
  gui.add(camera.rotation,"y", -360, 360);
  gui.add(camera.rotation,"z", -360, 360);
  scene.add(gui);
  
  let cameraHelper = new THREE.CameraHelper(camera);
  scene.add(cameraHelper);
  let randerer = new THREE.WebGLRenderer();
  randerer.setSize(window.innerWidth,window.innerHeight);
  randerer.clearColor("#000000");
  randerer.render(scene,camera);
  document.getElementById("canvas").appendChild(randerer.domElement);
  window.addEventListener("resize",()=>{
    randerer.setSize(window.innerWidth,window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });

  let light = new THREE.DirectionalLight("#ffffff",110);
  light.position.set(50,50,50);
  scene.add(light);

  // 池塘
  let pondGeometry = new THREE.PlaneGeometry(50,50);
  let pondMaterial = new THREE.MeshPhongMaterial({
    color:"#523be4",
    alphaTest:0.5,
    side:THREE.DoubleSide
  });
  let pondMesh = new THREE.Mesh(pondGeometry,pondMaterial);
  pondMesh.position.set(0,0,0);
  scene.add(pondMesh);

  let axies = new THREE.AxesHelper(100);
  scene.add(axies);
  let controls = new OrbitControls(camera,randerer.domElement);
  controls.addEventListener('change', function () {
    randerer.render(scene, camera); //执行渲染操作
    console.log(camera.position);
    console.log(camera.rotation);
  });//监听鼠标、键盘事件
  function render () {

    randerer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();

}
onMounted(()=>{
  init();
})

</script>

<style scoped>
.css-box{
  width: 100vw;
  height: 100vh;
}
</style>

